@import '../../styles/variables.scss';

.chat-room-page {
  height: calc(100vh - 120px);

  .chat-container {
    display: flex;
    height: 100%;
    gap: $spacing-md;
    background: $white;
    border-radius: $border-radius-lg;
    overflow: hidden;

    // 左侧聊天室列表
    .rooms-sidebar {
      width: 320px;
      border-right: 1px solid $border-color;
      display: flex;
      flex-direction: column;
      background: #fafafa;

      .sidebar-header {
        padding: $spacing-lg;
        border-bottom: 1px solid $border-color;
        @include flex-between;

        h2 {
          margin: 0;
          font-size: $font-size-xl;
          color: $text-color;
        }
      }

      .rooms-list {
        flex: 1;
        overflow-y: auto;
        padding: $spacing-xs;

        .room-item {
          display: flex;
          align-items: center;
          gap: $spacing-md;
          padding: $spacing-md;
          margin-bottom: $spacing-xs;
          background: $white;
          border-radius: $border-radius-base;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 2px solid transparent;

          &:hover {
            background: rgba($primary-color, 0.05);
            transform: translateX(4px);
          }

          &.active {
            background: rgba($primary-color, 0.1);
            border-color: $primary-color;
          }

          .room-info {
            flex: 1;
            min-width: 0;

            .room-name {
              font-weight: 600;
              color: $text-color;
              font-size: $font-size-base;
              margin-bottom: $spacing-xs;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .room-last-msg {
              font-size: $font-size-sm;
              color: $text-color-secondary;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .room-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: $spacing-xs;

            .room-time {
              font-size: $font-size-xs;
              color: $text-color-secondary;
            }

            .room-online {
              font-size: $font-size-xs;
              color: $text-color-secondary;
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
      }
    }

    // 右侧聊天内容
    .chat-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;

      .chat-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: none;
        box-shadow: none;

        .ant-card-body {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 0;
        }

        .chat-header {
          padding: $spacing-lg;
          border-bottom: 1px solid $border-color;
          background: #fafafa;

          .header-info {
            h2 {
              margin: 0 0 $spacing-xs 0;
              font-size: $font-size-xl;
              color: $text-color;
            }

            .online-info {
              font-size: $font-size-sm;
              color: $text-color-secondary;
              display: inline-flex;
              align-items: center;
              gap: $spacing-xs;
            }
          }
        }

        .messages {
          flex: 1;
          overflow-y: auto;
          padding: $spacing-lg;

          .msg {
            &.self .bubble {
              background-color: rgba($primary-color, 0.15);
              border-color: $primary-color;
            }

            .user {
              font-weight: 600;
              color: $text-color;
            }
            .time {
              font-size: $font-size-xs;
              color: $text-color-secondary;
            }
            .bubble {
              display: inline-block;
              margin-top: $spacing-xs;
              padding: $spacing-sm $spacing-md;
              background-color: $white;
              border: 1px solid $border-color;
              border-radius: $border-radius-base;
              line-height: 1.6;
              max-width: 80%;
              white-space: pre-wrap;
            }
          }
        }

        .composer {
          display: flex;
          gap: $spacing-sm;
          padding: $spacing-lg;
          border-top: 1px solid $border-color;
          background: #fafafa;

          .ant-input-textarea {
            flex: 1;
          }

          .ant-btn {
            align-self: flex-end;
          }
        }
      }
    }
  }

  // 弹窗样式
  .chat-rooms-modal {
    .modal-filters {
      margin-bottom: $spacing-lg;
      padding-bottom: $spacing-md;
      border-bottom: 1px solid $border-color;
    }

    .modal-rooms-grid {
      max-height: 60vh;
      overflow-y: auto;

      .room-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: $border-radius-lg;
        border: 2px solid $border-color;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: $primary-color;
          box-shadow: $box-shadow-lg;
          transform: translateY(-4px);
        }
        
        .ant-card-body {
          padding: $spacing-lg;
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        
        .room-header {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: $spacing-md;
          
          .room-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba($primary-color, 0.1) 0%, rgba($primary-color, 0.05) 100%);
            border-radius: 50%;
          }
        }
        
        .room-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .room-name {
            font-size: $font-size-lg;
            font-weight: 600;
            color: $text-color;
            margin: 0 0 $spacing-md 0;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.4;
            min-height: 2.8em;
          }
          
          .room-tags {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: $spacing-xs;
            margin-bottom: $spacing-md;
            
            .ant-tag {
              margin: 0;
              border-radius: $border-radius-sm;
              font-size: $font-size-sm;
              padding: 2px 8px;
            }
          }
          
          .room-description {
            font-size: $font-size-sm;
            color: $text-color-secondary;
            text-align: center;
            margin-bottom: $spacing-md;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.5;
          }
          
          .room-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: $spacing-md;
            border-top: 1px solid $border-color;
            font-size: $font-size-sm;
            
            .online-count {
              display: flex;
              align-items: center;
              gap: $spacing-xs;
              color: $text-color-secondary;
              
              .anticon {
                color: $primary-color;
              }
            }
          }
        }
      }
    }
  }
}
